<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="批量导入"
    width="600"
    show-footer
    show-zoom
    resize
    @close="close"
    :z-index="2000"
  >
    <div class="row">
      <div class="row-title">第 1 步：点击下载模版</div>
      <a href="#" class="row-main bg-gray-50 text-center pt-3 pb-3 block" @click="totips">
        <span class="text-blue-500"
          ><svg-icon class="mr-1 inline-block" icon-class="download01"></svg-icon>
          下载模版</span
        >
      </a>
    </div>
    <div class="row">
      <div class="row-title">第 2 步：按照模版要求填写</div>
      <div class="row-main"></div>
    </div>
    <div class="row">
      <div class="row-title">第 3 步：上传填写完成的文件</div>
      <div class="flex justify-between uploadBox">
        <VUpload :limit="limit" :validator="validator" type="file" @success="success">
          <el-button type="primary" link class="flex items-center">
            <svg-icon icon-class="Plus"></svg-icon> 上传文件
          </el-button>
        </VUpload>
      </div>
      <div class="upload-area mt-2 flex flex-wrap pt-4 pl-4" v-if="fileList.length">
        <div class="upload-tips">已上传文件</div>
        <div class="mr-4 mb-4 w-full" v-for="(item, index) in fileList" :key="item.url">
          <div class="flex justify-start items-center">
            <div class="line1 w-4/5">{{ item.filename }}</div>
            <svg-icon
              icon-class="state_fail_cover"
              class="text-base text-white z-10 inline-block"
              @click="handleRemove(index)"
            />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save()">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="UploadPictures">
import { reactive, ref, toRefs } from "vue";
import VUpload from "@/components/VUpload/index.vue";
import { ElMessage } from "element-plus";

const visible = ref(false);
const loading = ref(false);
const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});
const certificate = ref(null);
const fileList = ref([]);
const data = reactive({
  limit: 10, // 最大文件上传数
  binary: null,
  parameter: {
    title: "",
    fileSize: 5,
    fileType: [
      "application/vnd.ms-excel",
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    ],
  },
  url: "",
  load: false,
});
const { limit, url, load } = toRefs(data);

const open = async () => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  visible.value = true;
};

const obj = {
  1: "产品规格书",
  2: "认证证书",
  3: "样品检测报告",
  4: "产品丝印",
  5: "产品包装图",
  6: "产品说明书",
  7: "其他",
};
const success = (obj) => {
  fileList.value.push({
    filename: obj.filename,
    filepath: obj["data-show-file"],
    certificate_type: "",
    certificate_class: certificate.value,
  });
};
// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};
// 文件上传
const save = () => {
  ElMessage.error("没确定方案,先别提bug");
  close();
};
const totips = () => {
  ElMessage.error("没确定方案,先别提bug");
};
const handleRemove = (index) => {
  fileList.value.splice(index, 1);
};

const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 178px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}

.row {
  .row-title {
    font-size: 14px;
    font-weight: bold;
    color: #0a1431;
    line-height: 20px;
    padding: 8px 0;
  }
}

.upload-area {
  background: #fafafa;
  border-radius: 4px;

  .upload-tips {
    font-size: 12px;
    font-weight: 400;
    color: #9da1ad;
    line-height: 17px;
    text-align: center;
    padding: 4px 0;
  }
}
</style>
